<template>
  <div class="login">
    <!-- 背景图 -->
    <div class="bg_img" :style="'height:' + fullHeight + 'px;'">
      <img src="../../assets/bg.png" alt="">
    </div>
    <!-- 登录信息 -->
    <div class="login_box">
      <!-- 系统名 -->
      <div class="title">
        <div>dmeo</div>
        <div>后台管理系统</div>
      </div>
      <!-- 登录表单 -->
      <div class="form">
        <el-form :label-position="labelPosition" label-width="55px" status-icon :model="formData" :rules="rules"
          ref="formData">
          <el-form-item label="用户名" prop="userName">
            <el-input v-model="formData.userName" placeholder="请输入用户名"></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input type="password" v-model="formData.password" placeholder="请输入密码"></el-input>
          </el-form-item>
          <div class="btn">
            <el-button type="primary" @click="submitForm('formData')">登录</el-button>
          </div>
        </el-form>
      </div>
    </div>

    <!-- 图片验证 内置图片跨域-->
    <el-dialog title="请拖动图片到指定位置" :visible.sync="centerDialogVisible" :close-on-click-modal="false" width="30%" center>
      <slide-verify ref="slideblock" :l="42" :r="10" :w="350" :h="155" slider-text="向右滑动" @fail="onFail" @success="onSuccess" @refresh="onRefresh"/>
    </el-dialog>
  </div>
</template>

<script>
import asyncRoutes from '@/router/asyncRoutes';
export default {
  name: "",
  components: {},
  props: {},
  computed: {},
  data() {
    // 校验规则方法
    var checkName = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('用户名不能为空'));
      }
      callback();
    };
    var validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'));
      } else {
        if (this.formData.checkPass !== '') {
          this.$refs.formData.validateField('checkPass');
        }
        callback();
      }
    };
    return {
      // 获取浏览器高度
      fullHeight: document.documentElement.clientHeight,
      labelPosition: 'right',
      formData: {
        userName: '',
        password: '',
      },
      // 校验规则
      rules: {
        userName: [{ validator: checkName, trigger: 'blur' }],
        password: [{ validator: validatePass, trigger: 'blur' }],
      },
      // 图片滑动验证
      centerDialogVisible: false,
      loading: false,
      verified: false,
    }
  },
  mounted() {
    // 阻止浏览器后退
    history.pushState(null, "null", document.URL);
    window.addEventListener('popstate', function () {
      history.pushState(null, "null", document.URL);
    });
    // 动态获取浏览器高度
    this.get_bodyHeight();
  },
  //方法
  methods: {
    //动态获取浏览器高度
    get_bodyHeight() {
      const that = this
      window.onresize = () => {
        return (() => {
          window.fullHeight = document.documentElement.clientHeight
          that.fullHeight = window.fullHeight
        })()
      }
    },
    // 登录提交
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          localStorage.setItem("userToken", '1234567');
          this.$store.commit("login", '1234567');
          this.$store.commit("setRoles", 'admin');
          this.$store.commit("setUserInfo", this.formData);
          this.$store.commit('setRoutes', asyncRoutes);
          // this.$router.push(this.$route.query.redirect);//跳转至参数指定位置
          this.$router.push("home");
          this.$message({ message: '登录成功', type: 'success' });
        } else {
          this.$message({ message: '登录失败', type: 'error' });
          return false;
        }
      });
    },
    // 重置
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    /************ 图片滑动验证 ************/
    // 失败
    onFail() {},
    // 重新刷新
    onRefresh() {
      this.$refs.slideblock.reset();
    },
    onSuccess() { },

    /************ 图形验证 ************/
    
  },
}
</script>

<style lang="scss" scoped>
.login {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;

  .bg_img {
    width: 100%;

    img {
      width: 100%;
      height: 100%;
    }
  }

  .login_box {
    position: absolute;
    padding-bottom: 40px;

    .title {
      font-size: 30px;
      text-align: center;
      letter-spacing: 0.2em;
      margin-bottom: 100px;
    }

    .form {
      border: 1px solid #f1f1f1;
      padding: 30px;
      box-shadow: 0px 1px 5px -1px;

      .el-form-item {
        margin-bottom: 40px;
      }

      .el-input {
        width: 385px;
      }

      .btn {
        width: 100%;
        text-align: center;

        button {
          width: 300px;
        }
      }

      .el-button+.el-button {
        margin-left: 20px;
      }
    }
  }
}
.verify{
  position: absolute;
  left: 50px;
}
</style>